<template>
  <view class="process">
    <view class="vs">
      <view class="left" :class="leftPeoples > rightPeoples ? 'vs-golden' : 'vs-gray'" :style="'width: ' + (leftPeoples / (leftPeoples + rightPeoples)) * 100 + '%'"></view>
      <view class="right" :class="leftPeoples < rightPeoples ? 'vs-golden' : 'vs-gray'"></view>
      <view class="pos" :style="'left: calc(' + (leftPeoples / (leftPeoples + rightPeoples)) * 100 + '% - 22.5upx)'">
        <image src="/static/images/video/17_pk_hot02.png" mode="widthFix"></image>
      </view>
    </view>
    <view class="score">
      <view>{{ leftScore > 1000000 ? (leftScore / 10000).toFixed(0) + "万" : leftScore }}积分</view>
      <view>累计奖池</view>
      <view>{{ rightScore > 1000000 ? (rightScore / 10000).toFixed(0) + "万" : rightScore }}积分</view>
      <view class="pos" :style="'width:calc(' + (rightScore / (leftScore + rightScore)) * 100 + '% - 11upx)'"></view>
    </view>
  </view>
</template>

<script>
let timer;
export default {
  name: "scoreVs",
  props: {
    matchId: {
      type: Number,
      default: 0,
      required: true
    }
  },
  data() {
    return {
      leftPeoples: 0,
      rightPeoples: 0,
      leftScore: 0,
      rightScore: 0
    };
  },
  mounted() {
    this.init();
    timer = setInterval(() => {
      this.init();
    }, 5000);
    uni.$on("scoreVs_init", () => {
      clearInterval(timer);
      this.init();
    });
  },
  destroyed() {
    clearInterval(timer);
  },
  methods: {
    init() {
      return this.$api.video.getMatchSupportDetail(this.matchId).then(_ => {
        this.leftPeoples = _.data.data.teamAPeoples;
        this.rightPeoples = _.data.data.teamBPeoples;
        this.leftScore = _.data.data.teamASupport;
        this.rightScore = _.data.data.teamBSupport;
        return _;
      });
    }
  }
};
</script>

<style lang="scss">
.score {
  background-image: url("~@/static/images/video/17_pk_point01.png");
  background-attachment: fixed;
  background-position: center;
  position: relative;
  height: 44upx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 10upx;
  > view {
    font-size: 24upx;
    color: #ffffff;
    z-index: 1;
  }
  > .pos {
    content: " ";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 50%;
    opacity: 0.75;
    border-bottom-color: rgba(red, 0.75);
    border-bottom-width: 44upx;
    border-bottom-style: solid;
    border-left-color: transparent;
    border-left-style: solid;
    border-left-width: 22upx;
    z-index: 0;
  }
}
.vs {
  background-color: #000000;
  position: relative;
  height: 50upx;
  width: 100%;
  overflow: hidden;
  display: flex;
  .left {
    position: relative;
    width: 0;
    &:after {
      content: " ";
      position: absolute;
      top: 20upx;
      height: 8upx;
      width: 100%;
    }
  }
  .right {
    background: #f0ad4e;
    &:after {
      content: " ";
      position: absolute;
      top: 20upx;
      height: 8upx;
      width: 100%;
    }
  }
  .pos {
    position: absolute;
    top: 0;
    width: 55upx;
    height: 47upx;
    background-color: #000000;
    padding: 0 5upx;
    image {
      width: 100%;
      height: 100%;
    }
  }
}

.vs-golden:after {
  background-color: #f0ad4e;
}
.vs-gray:after {
  background-color: #666666;
}
</style>
